<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <!-- Bootstrap v3.3.4 核心 CSS 文件 -->
    <link rel="stylesheet" href="../css/bootstrap.min.css">
    <script src="../js/jquery.min.js"></script>
    <!-- Bootstrap v3.3.4 核心 JavaScript 文件 -->
    <script src="../js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="../css/sqh_style_v2.0.css">
    <script src="../js/sqh_wap.js"></script>
    <script src="../js/sqh_js_v2.0.js"></script>
    <title>找回密码</title>
</head>
<body class="">

<div class="row bg_232323 color_fff padding_top_10 padding_bottom_10">
    <a href="http://www.baidu.com">
        <div class=" col-xs-2">
            <span class="icon iconfont color_fff" aria-hidden="true">&#xe608;</span>
        </div>
    </a>
    <div class="col-xs-8 text-center">
        <span class="font_18"  role="button" aria-expanded="false">找回密码</span>
    </div>
    <div class="col-xs-2">
        <div class="col-xs-2 text-right">
        </div>
    </div>
</div>

<form>
<div class="line_height_40px container-fluid border_b_top_eee border_b_bottom_eee margin_top_10">
    <div class="">
        <div class="width_60px float_left">
            手机号
        </div>
        <div class="margin_left_60 relative">
            <input type="tel" id="phoneNumber" name="phoneNumber" class="clear_border all_width padding_right_25" placeholder="请输入手机号" maxlength="11">
            <span class="absolute padding_top_10" style="top: 0;right: 0;" onclick="clearNumber()">
                <img src="../img/tsdd/icon_del.png" onclick="" class="img-responsive width_20px ">
            </span>
        </div>
    </div>

    <div class="border_b_top_eee overflow_hidden">
        <div class="width_60px float_left">
            验证码
        </div>
        <div class="margin_left_60">
            <div class="float_right pointer width_70px height_40px text-center padding_top_5" onclick="getValideCode()" id="countDownTarget">
                <span class="btn_blue height_div_30" style="padding: 0 6px;">获取验证码</span>
            </div>
            <div class=" margin_right_80">
                <input type="text" name="valiCode" id="valiCode" class="clear_border all_width" placeholder="请输入验证码" maxlength="6">
            </div>
        </div>
    </div>

    <div class="border_b_top_eee">
        <div class="width_60px float_left">
            密　码
        </div>
        <div class="margin_left_60">
            <input type="password" id="pwd" name="pwd" class="clear_border all_width" placeholder="重新设置密码" maxlength="16">
        </div>
    </div>

    <div class="border_b_top_eee">
        <div class="width_60px float_left">
            二次确认
        </div>
        <div class="margin_left_60">
            <input type="password" id="repwd" name="repwd" class="clear_border all_width" placeholder="再次输入密码" maxlength="16">
        </div>
    </div>

</div>

<div class="container-fluid line_height_40px margin_top_15">
    <div class="btn_gray all_width font_16" onclick="btnCommit(this)" id="submitBtn">确定</div>
    <input type="submit" value="确定" class="display_none" id="formSubmit">
</div>
</form>

</body>

<script>
    $(function(){
        phoneNumber.onkeyup=changeBtn;
        valiCode.onkeyup=changeBtn;
        pwd.onkeyup=changeBtn;
        repwd.onkeyup=changeBtn;

        //只允许输入数字
        inputNumberOnly("#phoneNumber");
        inputNumberOnly("#valiCode");
    });

    //获取验证码
    function getValideCode() {
        var mySetting = {
            //目标容器的ID，这个使用jquery查询的条件
            targetId: "#countDownTarget",
            //定时器的总共时长
            timeCount: 5,
            tips: "{_time_}秒"
        };

        new timerCount(mySetting);
    }

    //检查是否输入，是否允许输入按钮
    function changeBtn(){
        var phoneNumber = document.getElementById("phoneNumber").value;
        var valiCode = document.getElementById("valiCode").value;
        var pwd = document.getElementById("pwd").value;
        var repwd = document.getElementById("repwd").value;
        if(phoneNumber.length>0 && valiCode.length>0 && pwd.length>0 && repwd.length>0 ){
            $("#submitBtn").removeClass("btn_gray").addClass("btn_blue");
        }else{
            $("#submitBtn").removeClass("btn_blue").addClass("btn_gray");
        }
    }

    //检查号码是否满足要求
    function isPhoneNumber(){
        var phoneNumber = document.getElementById("phoneNumber").value;
        var result = phoneNumber.isPhoneNumber();
        if(!result){
            alert("手机号不正确");
        }
        return result;
    }

    function clearNumber(){
        document.getElementById("phoneNumber").value="";
        changeBtn();
    }

    //检查密码
    function checkPwd(targetId){
        var obj = document.getElementById(targetId);
        var pwd = obj.value;
        if(pwd.length=0){
            alert("密码不能为空");
            obj.focus();
            return true;
        }else if(pwd.length < 6){
            alert("密码长度至少为6位");
            obj.focus();
            return false;
        }else{
            return true;
        }
    }

    //提交表单
    function btnCommit(obj){
        var currentObj = $(obj);
        if(currentObj.hasClass("btn_gray")){
            return false;
        }
        if(isPhoneNumber() && checkPwd("pwd") && checkPwd("repwd")){
            var pwd = document.getElementById("pwd").value;
            var repwd = document.getElementById("repwd").value;
            if(pwd == repwd){
                document.getElementById("formSubmit").click();
            }
        }
    }

</script>

</html>
